import React, { Component } from 'react';
import { Route } from 'react-router-dom';
// import User from "../pages/user";
import Login from "../pages/login";
// import NoPage from "../pages/no-page";



//前置守卫 1  条件 同步
/*

export default class Auth extends Component{

  render(){
    if (Math.random()<.5){
      return <Route component={User} />
    } else {
      return <Route component={Login} />
    }
  }

}*/

/*
//前置守卫 2  条件 异步

export default class Auth extends Component{

  state = {
    hasSendAuth:false,
    auth:false,
    data:'-',//预载数据
  };

  async componentDidMount(){
    //异步操作

    let res = await fetch(`/user.json`);
    let data = await res.json();
    console.log(data);

    this.setState({
      hasSendAuth:true,
      auth:data.auth,
      data:data.username
    })

  }



  render(){

    if (!this.state.hasSendAuth) return null;

    if (this.state.auth){
      {/!*<User username={this.state.data} />*!/}
      return <Route component={User} />
    } else {
      return <Route component={Login} />
    }
  }

}*/



//前置守卫 3  条件 异步 数据预载

/*
export default class Auth extends Component{

  state = {
    hasSendAuth:false,
    auth:false,
    data:'-',//预载数据
  };

  async componentDidMount(){
    //异步操作

    let res = await fetch(`/user.json`);
    let data = await res.json();
    console.log(data);

    this.setState({
      hasSendAuth:true,
      auth:data.auth,
      data:data.username
    })

  }

  render(){

    if (!this.state.hasSendAuth) return null;

    if (this.state.auth){
      {/!*<User username={this.state.data} />*!/}
      return <Route render={()=>{
        return <User username={this.state.data}/>
      }} />
    } else {
      return <Route component={Login} />
    }
  }

}*/

/*
// 前置守卫 4  条件 异步 数据预载  多处使用

export default class Auth extends Component{

  state = {
    hasSendAuth:false,
    auth:false,
    data:'-',//预载数据
  };

  async componentDidMount(){
    //异步操作

    let res = await fetch(`/user.json`);
    let data = await res.json();
    console.log(data);

    this.setState({
      hasSendAuth:true,
      auth:data.auth,
      data:data.username
    })

  }

  render(){

    let {component:Component} = this.props;

    console.log(Component);

    if (!this.state.hasSendAuth) return null;

    if (this.state.auth){
      {/!*<User username={this.state.data} />*!/}
      return <Route render={()=>{
        return <Component username={this.state.data}/>
      }} />
    } else {
      return <Route component={Login} />
    }
  }

}*/


// 前置守卫 5  条件 异步 数据预载  多处使用

/*export default class Auth extends Component{

  state = {
    hasSendAuth:false,
    auth:false,
    data:'-',//预载数据
  };

  async componentDidMount(){
    //异步操作

    let res = await fetch(`/user.json`);
    let data = await res.json();
    console.log(data);

    this.setState({
      hasSendAuth:true,
      auth:data.auth,
      data:data.username
    })

  }

  render(){
    console.log(this.props)

    let {component:Component} = this.props;

    console.log(Component);

    if (!this.state.hasSendAuth) return null;

    if (this.state.auth){
      {/!*<User username={this.state.data} />*!/}
      return <Route {...this.props} render={()=>{
        return <Component username={this.state.data}/>
      }} />
    } else {
      return <Route component={Login} />
    }
  }

}*/


// 前置守卫 6  条件 异步 数据预载  多处使用

export default class Auth extends Component {

  state = {
    hasSendAuth: false,
    auth: false,
    data: '-',//预载数据
  };

  async componentDidMount() {
    //异步操作

    let res = await fetch(`/user.json`);
    let data = await res.json();
    console.log(data);

    this.setState({
      hasSendAuth: true,
      auth: data.auth,
      data: data.username
    })

  }

  render() {

    // console.log(this.props)

    let { component: Component, ...rest } = this.props;

    // console.log(Component);

    // if (!this.state.hasSendAuth) return null;

    /*if (this.state.auth){
      {/!*<User username={this.state.data} />*!/}
      return <Route {...this.props} render={()=>{
        return <Component username={this.state.data}/>
      }} />
    } else {
      return <Route component={Login} />
    }*/

    console.log('xxx')

    return <Route {...rest} render={(rest) => {
      console.log('...')
      if (this.state.auth) {
        return <Component {...rest} username={this.state.data} />
      } else {
        return <Login {...rest} />
      }
    }} />
  }
}


//条件 同步

/*
let Auth = ({component:Component, ...rest}) => (
  <Route {...rest}  render={rest=>(
    Math.random() < .5 ?
      <Component {...rest} /> :
      <Login {...rest}/>
  )} />
);

export default Auth;
*/

